<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>

		<!-- 钱包 -->
		<sh-wallet></sh-wallet>

		<!-- 我的团队 -->
		<sh-team></sh-team>

		<!-- 订单卡片 -->
		<sh-order-card></sh-order-card>

		<view class="user-img" @tap="onPoster('invite')">
			<image class="w100" src="/static/images/user-1.png" mode="widthFix" />
		</view>
		<!-- <view class="user-img" @tap="onPoster('goods')">
			<image class="w100" src="/static/images/user-2.png" mode="widthFix" />
		</view> -->

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width: 100%;"></view>
		<!-- #endif -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<!-- 分享组件 -->
		<!-- <sh-share ref="shareCanvasRef"></sh-share> -->
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shWallet from "./components/sh-wallet.vue";
	import shTeam from "./components/sh-team.vue";
	import shOrderCard from "./components/sh-order-card.vue";
	import shShare from "./components/sh-share.vue";

	import userinfoCard from "./user/userinfo-card.vue";

	import { mapMutations, mapActions, mapState, mapGetters } from "vuex";

	import share from "@/shopro/share";

	export default {
		components: {
			shWallet,
			shTeam,
			shOrderCard,
			shShare,
			userinfoCard,
		},
		data() {
			return {
				scrollTop: 0,
				showShare: false,
				enable: false, //是否开启吸顶。
			};
		},
		computed: {
			...mapGetters(["initShop", "userTemplate", "isLogin", "userInfo", "authType"]),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		onShow() {
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
		},

		methods: {
			...mapActions(["getUserInfo", "showAuthModal", "getUserData"]),
			onPoster(type) {
				// this.$refs.shareCanvasRef.onPoster(type);
				this.showShare= true;
			},
			// 初始化
			init() {
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
		},
	};
</script>

<style lang="scss">
	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}

	.user-img {
		width: 100%;
		margin-top: 20rpx;
		padding: 0 32rpx;
	}
</style>
